<template>
	<view>
		<!-- 滚动 -->
		<scroll-view scroll-top="0" scroll-y="true"  class="scroll" lower-threshold='50'>
			<view>
		<!-- 轮播图start -->
		<view class="text-area">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" circular :interval="interval" :duration="duration" indicator-dots acceleration>
			  <swiper-item v-for = "(item,i) in banner" :key = 'i' >
			  <view class="swiper-item uni-bg-red" >
				  <image :src="item" mode="scaleToFil"></image>
			  </view>
			  </swiper-item>
			</swiper>
		</view>
		<!-- 轮播图end -->
		<view>
			<view v-for="item in this.$store.state.goodsbuyList">
				{{item}}
			</view>
		</view>
		<!-- 信息展示 -->
		<view class="message">
			<view class="title">{{title}}</view>
			<view class="money">
				<view class="first-money">{{'￥'+lowNowPrice}}</view>
				<view class="old-money">{{oldPrice}}</view>
				<view class="tejia"></view>
			</view>
			<view class="message-bottom">
				<view>{{number}}</view>
				<view>{{shoucang}}</view>
				<view>72小时发货</view>
			</view>
			<view class="tab">
				<view class="tuihuo">
					<icon type="success" size="16"/>
					<view>退货补运费</view>
				</view>
				<view class="tuihuo">
					<icon type="success" size="16"/>
					<view>全国包邮</view>
				</view>
				<view class="tuihuo">
					<icon type="success" size="16"/>
					<view>7天无理由退货</view>
				</view>
				</view>
		</view>
		<!-- 商品信息end -->
		<!-- 店铺信息 -->
		<view class="dianpu">
			<!-- 头像一行 -->
			<view class="box-logo">
				<view class="logo">
					<image :src="dpdata.shopLogo"></image>
				</view>
				<view>{{dpdata.name}}</view>
			</view>
			<!-- 中间一行 -->
			<view class="center">
				<view class="center-box first-box">
					<!-- 总销量 -->
					<view class="all-zxl">
						<view class="all-number">{{cfans+"万"}}</view>
						<view class="all-text">总销量</view>
					</view>
					<!-- 全部宝贝 -->
					<view class="all-zxl">
						<view class="all-number">{{dpdata.cGoods}}</view>
						<view class="all-text">全部宝贝</view>
					</view>
				</view>
				<view class="center-box tow-box">
					<view v-for ="(item,i) in dpRight" class="miaoshu">
						<view>{{item.name}}</view>
						<view :class="[item.isBetter ? 'fenshu' : 'newfenshu']">{{item.score}}</view>
						<view v-if ="item.isBetter" class="gao">高</view>
						<view v-else class="di">低</view>
					</view>
				</view>
			</view>
			<!-- 进店逛逛 -->
			<view class="jdgg">
				<button type="default" @click="jdgg">进店逛逛</button>
			</view>
			<!-- 进店逛逛end -->
		</view>
		<!-- <穿着效果> -->
		<view class="dress">
			<view class="dresstext">{{dressing.key}}</view>
			<view>
				<image v-for="(item,i) in dressing.list" :key ="i" :src="item" class="dressImg" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 穿着效果img-end -->
		<!-- 尺寸等 -->
		<view class="table-box">
			<view v-for ="(item,i) in tables" :key="i" class="table">
				<view v-for="(cc,a) in item" :key ="a">{{cc}}</view>
			</view>
		</view>
		<!-- 产品参数 -->
		<view class="table-box">
			<view style="font-weight: 600;">产品参数</view>
			<view v-for ="(item,i) in goodsparam" :key="i" class="table-two">
				<view class="tuan">{{item.key}}</view>
				<view class="intuan">{{item.value}}</view>
			</view>
		</view>
		<!-- 产品参数end -->
		<!-- 用户评价 -->
		<view class="user-box">
			<view class="user-first">
				<view>用户评价</view>
				<view>更多></view>
			</view>
			<view class="user-two">
				<!-- 用户头像和名称 -->
				<view class="user-message">
					<view class="user-touxiang">
						<image :src="user.avatar"></image>
					</view>
					<view>{{user.uname}}</view>
				</view>
				<!-- 评论内容 -->
				<view class="user-content">
					{{userass.content}}
				</view>
				<!-- 评论时间和买入信息 -->
				<view class="user-style">
					<view>{{userass.created | dateFormat}}</view>
					<view class="ass-style">{{userass.style}}</view>
				</view>
				<!-- 评论图-->
				<view class="assimg-box" v-show="assimg">
					<view v-for="(item,i) in assimg" class="assimg" @click="look(assimg,i)" >
						<image :src="item" mode="aspectFill" ></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户评价end -->
		<!-- 相关推荐展示 -->
		<view class="about-tj">相关推荐</view>
		<inpage-data :pagedata ="goodsinpagedata"></inpage-data>
		
		</view>
		</scroll-view>
		<!-- 底部tab -->
		<view class="bottom-tab">
			<view class="bottom-tab-iconall">
				<view class="bottom-tab-icon">
					<image src="../../../static/icon/bottomtab/10.png"></image>
					<view>客服</view>
				</view>
				<view class="bottom-tab-icon">
					<image src="../../../static/icon/bottomtab/dianpu.png"></image>
					<view>店铺</view>
				</view>
				<view class="bottom-tab-icon">
					<image src="../../../static/icon/bottomtab/shoucang.png"></image>
					<view>收藏</view>
				</view>
			</view>
			<view class="bottom-tab-add" @click="addbuyCar">加入购入车</view>
			<view class="bottom-tab-buy">购买</view>
		</view>
	</view>
</template>

<script>
	import inpageData from"./inpageData.vue";
	export default {
		components:{
			inpageData
		},
		data() {
			return {
				banner:[],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title:'',
				lowNowPrice:'',
				oldPrice:'',
				number:'',
				shoucang:'',
				dpdata:'',
				cfans:'',
				dpRight:[],
				dpurl:'',
				dressing:'',
				tables:[],
				goodsparam:[],
				userass:'',
				user:'',
				assimg:[],
				goodsinpagedata:[],
				goodsbuyCar:{},
				iid:'',
				shopid:''
			}
		},
		onLoad(e) {
			this.shopid =e.shopId
			const iid = e.shopId
			this.getpagedata(iid)
			this.getinpagedata()
		},
		onShareAppMessage(res) {
		    return {
		      title:this.title,
		      path: '/pages/index/inpages/indexpage?shopId='+this.shopid,
		    }
		  },
		methods: {
			async getpagedata(iid){
				await uni.request({
				url: this.baseurl +"/detail" +"?iid="+iid,
				method:"GET",
				success: (res) => {
				     console.log(res.data)
					 this.banner = res.data.result.itemInfo.topImages
					 this.title =res.data.result.itemInfo.title
					 this.lowNowPrice =res.data.result.itemInfo.lowNowPrice
					 this.oldPrice =res.data.result.itemInfo.oldPrice
					 this.number =res.data.result.columns[0]
					 this.shoucang =res.data.result.columns[1]
					 this.dpdata =res.data.result.shopInfo
					 const fans =res.data.result.shopInfo.cFans
					 this.cfans =Number(fans/10000).toFixed(1)  
					 this.dpRight =res.data.result.shopInfo.score
					 this.dpurl =res.data.result.shopInfo.allGoodsUrl
					 this.dressing =res.data.result.detailInfo.detailImage[0]
					 this.tables =res.data.result.itemParams.rule.tables[0]
					 this.goodsparam =res.data.result.itemParams.info.set
					 this.userass =res.data.result.rate.list[0]
					 this.user =res.data.result.rate.list[0].user
					 this.assimg =res.data.result.rate.list[0].images
					 this.iid =res.data.iid
				    },
					})
			},
			//获得推荐展示数据
			async getinpagedata(){
				await uni.request({
				url: this.baseurl +"/recommend",
				method:"GET",
				success: (res) => {
				     console.log(res.data)
					 this.goodsinpagedata =res.data.data.list
				    },
					})
			},
			//进店逛逛
			jdgg(e){
				uni.navigateTo({
					url:"./dianpu?url="+this.dpurl
				})
				console.log(e)
			},
			//预览图片
			look(a,b){
				uni.previewImage({
					loop:true,
				    urls: a,
					current:b
				})
			},
			//加入购物车
			addbuyCar(){
				this.goodsbuyCar.img = this.banner[0]
				this.goodsbuyCar.id = this.iid
				this.goodsbuyCar.title = this.title
				this.goodsbuyCar.lowNowPrice =this.lowNowPrice
				// this.goodsbuyCar.ischeck =true
				// this.goodsbuyCar.count = ''
				console.log(this.goodsbuyCar)
				// this.$store.state.goodsbuyList.push(this.goodsbuyCar)
				this.$store.commit('addbuyCar',this.goodsbuyCar)
			}
		}
	}
</script>

<style scoped>
	@import url("./indexpage.css");
	.swiper{
		width: 100%;
		height: 1000upx;
		
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.swiper-item image{
		height: 100%;
		width: 100%;
	}
</style>
